<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="contentList">
      <el-table-column
        label="内容"
        align="center"
        prop="content"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="创留言时间" align="center" prop="createDateTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />

  </div>
</template>

<script>
import { listSelectCategory } from '@/api/campus/category'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
import notify from '@/api/campus/notify'
import leaveWord from '@/api/campus/leaveWord'

export default {
  name: 'Content',
  dicts: ['campus_content_status', 'campus_content_type', 'campus_anonymous'],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 校园墙内容表格数据
      contentList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      //是否显示详细的弹出层
      viewOpen: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      // 表单校验
      rules: {
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询公告列表 */
    async getList() {
      this.loading = true
      let { data } = await leaveWord.get(this.queryParams)
      console.log(data, 'notify')
      this.contentList = data.records
      this.total = data.total
      this.loading = false
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const messageId = row.messageId
      this.$modal.confirm('是否确认删除通知编号为"' + messageId + '"的数据项？').then(function() {
        return leaveWord.delete({ id: messageId })
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      })
    }
  }
}
</script>

<style scoped>
.picture_item {
  display: inline;
  padding-left: 0.25rem;
  padding-top: 0.25rem;
}
</style>
